<template>
  <div class="table-advisory">
    <vab-query-form>
      <vab-query-form-left-panel >
        <el-button icon="el-icon-plus" type="primary" @click="addAdvisory">
          添加记录
        </el-button>
        <el-button type="warning" @click="stamp(0)" >
          打印
        </el-button>
      </vab-query-form-left-panel>
      <vab-query-form-right-panel >
        <el-form
          ref="form"
          size="mini"
          :inline="true"
          @submit.native.prevent
        >
          <el-form-item>
            <el-input v-model="query.consultantName" placeholder="咨询人姓名" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="query.elderlyName" placeholder="老人姓名" />
          </el-form-item>
          <el-form-item>
            <el-select v-model="query.receptionStatus" placeholder="请选择接待状态">
              <el-option label="全部" value=""></el-option>
              <el-option label="咨询" value="1"></el-option>
              <el-option label="跟进中" value="2"></el-option>
              <el-option label="已签约" value="3"></el-option>
              <el-option label="关闭" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="咨询时间" required >
            <el-col :span="11">
              <el-form-item prop="date1" style="margin: 0">
                <el-date-picker type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                v-model="query.consultationTimeStart" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2" style="width: 10px;margin-left: 2px"> - </el-col>
            <el-col :span="11">
              <el-form-item prop="date2" style="margin: 0">
                <el-date-picker type="date" placeholder="选择日期"
                                value-format="yyyy-MM-dd"
                                v-model="query.consultationTimeEnd" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              type="primary"
              native-type="button"
              @click="search"
            >
              查询
            </el-button>
          </el-form-item>
        </el-form>
      </vab-query-form-right-panel>
    </vab-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="advisoryList"
    >
<!--      <el-table-column-->
<!--        show-overflow-tooltip-->
<!--        type="selection"-->
<!--        width="55"-->
<!--      ></el-table-column>-->
<!--      <el-table-column show-overflow-tooltip label="记录编号" width="200"  prop="code">-->

<!--      </el-table-column>-->
      <el-table-column
        show-overflow-tooltip
        prop="consultantName"
        label="咨询人"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="咨询人联系方式"
        prop="consultantContactNumber"
      ></el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="老人姓名"
        prop="elderlyName"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="接待状态"
        prop="receptionStatusName"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="接待人"
        prop="receptionistName"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="咨询意向"
        prop="consultationIntentionName"

      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="咨询时间"
        prop="consultationTime">
        <template slot-scope="scope">
          <span>{{ scope.row.consultationTime | parseTime("{y}-{m}-{d} {h}:{i}:{s}") }}</span>
        </template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="180px"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="showDetail(scope.row)">
            查看详情
          </el-button>
          <el-button type="text" @click="editfollow(scope.row)" v-if="!scope.row.receptionStatus==0">
            跟进补充
          </el-button>
          <el-button type="text" @click="closeReception(scope.row)"  v-if="!scope.row.receptionStatus==0">
            关闭
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div ref="print" class="mytables" id="printContent">

      <h3 style="text-align: center;">接待咨询表</h3>
      <table style="width: 100%" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="title">日期</td>
              <td colspan="4" style="width: 40%">老人信息</td>
              <td rowspan="2" style="width: 11%">咨询人</td>
              <td rowspan="2" class="ttitle">联系方式</td>
          <td rowspan="2" class="ttitle">咨询时间</td>
           <td rowspan="2"style="width: 11%">咨询意向</td>
           <td rowspan="2" style="width: 11%">咨询内容</td>

            </tr>
         <tr>
              <td style="width: 10%">姓名</td>
              <td style="width: 10%">性别</td>
            <td style="width: 10%">年龄</td>
             <td style="width: 10%">自理情况</td>
            </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
              <td style="font-size: 14px">{{new Date()| parseTime('{y}-{m}-{d}')}}</td>
              <td style="width:5%;font-size: 14px">{{item.elderlyName}}</td>
              <td style="font-size: 14px">{{item.elderlyGenderName}}</td>
            <td style="font-size: 14px">{{item.elderlyAge}}</td>
              <td style="width:5%;font-size: 14px">{{item.elderlySelfCareName}}</td>
              <td style="font-size: 14px">{{item.consultantName}}</td>
              <td style="font-size: 14px"> {{item.consultantContactNumber}}</td>
             <td style="width:5%;font-size: 14px">{{item.consultationTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
              <td style="font-size: 14px">{{item.consultationIntentionName}}</td>
           <td style="font-size: 14px" >{{item.consultationContent}}</td>
             

            </tr>

        </tbody>
      </table>
    </div>
    <el-pagination
      :background="page.background"
      :total="page.total"
      :current-page="page.current"
      :page-size="page.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <edit_advisory_dialog ref="editAdvisoryDialog" ></edit_advisory_dialog>
    <show_advisory_dialog ref="showAdvisoryDialog" ></show_advisory_dialog>
    <edit_followUp_dialog ref="editFollowUpRecord" ></edit_followUp_dialog>
  </div>
</template>

<script>
    import EditAdvisory from "./components/EditAdvisory";
    import EditFollowUpRecord from "./components/EditFollowUpRecord";
    import ShowAdvisory from "./components/ShowAdvisory";
    import {searchReceptionsOfPage, searchReceptionDetail, closeRecord,outregistration} from "@/api/reception"
    import { parseTime} from "@/utils/index";
    import Print from '@/utils/print'
    import Vue from 'vue'
    Vue.use(Print)
    export default {
        name: "advisory",
        filters:{
          parseTime:parseTime
        },
        components: {
          "edit_advisory_dialog": EditAdvisory,
          "show_advisory_dialog": ShowAdvisory,
          "edit_followUp_dialog": EditFollowUpRecord
        },
        data(){
            return {
              listLoading: false,
                advisoryList: [],
                query: {
                  consultantName: undefined,
                  elderlyName: undefined,
                  consultationMode: undefined,
                  consultationIntention: undefined,
                  mediaChannel: undefined,
                  elderlySelfCare: undefined,
                  receptionStatus: '',
                  consultationTimeStart: new Date(),
                  consultationTimeEnd: new Date(),
                },
                page: {
                  limit: 10,
                  total: 0,
                  current: 1,
                  background: true
                },
                receptionForm:{
                    timeStart:"",
                    timeEnd:"",
                    institutionNumber:"",
                },
                list:[],
            }
        },
        methods: {
            addAdvisory() {
                this.$refs["editAdvisoryDialog"].show();
            },
            stamp(size){
                if(this.list){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }


            },
            search(){
              let params = this.query
              params.currPageNo = this.page.current
              params.limit = this.page.limit
              searchReceptionsOfPage(params).then(result => {

                if(result.code == "200"){
                  this.page.total = result.data.total
                  this.advisoryList = result.data.data
                }else{
                  this.$baseMessage("查询失败，"+result.message);
                  this.page.total = 0
                  this.advisoryList = []
                }
              })
                this.receptionForm.timeStart=this.query.consultationTimeStart
                this.receptionForm.timeEnd=this.query.consultationTimeEnd
                outregistration(this.receptionForm).then(result => {

                    console.log(result)
                    this.list = result.data
                })
            },
          handleCurrentChange(curr){
            this.page.current = curr
            this.search()
          },
          handleSizeChange(limit){
            this.page.limit = limit
            this.search()
          },
          async showDetail(row){
            const result = await searchReceptionDetail(row.code);
            if(result.code == '200'){
              console.log(result.data);
              this.$refs["showAdvisoryDialog"].show(result.data);
            }else{
              this.$baseMessage("查询接待记录详情失败，"+result.message);
              return false
            }
          },
          editfollow(row){
            this.$refs["editFollowUpRecord"].show(row);
          },
          async closeReception(row){
            const result = await closeRecord(row.code)
            if(result.code == '200'){
              this.$baseMessage("关闭记录成功");
              this.search()
            }else{
              this.$baseMessage("关闭记录失败，"+result.message);
            }

          },
          a1(callback){
            setTimeout(() => {
              callback('111')
            }, 1000)
            setTimeout(() => {
              callback('222')
            }, 3000)
          }
        },
        mounted(){
            this.receptionForm.institutionNumber=localStorage.getItem("institutionNumber")
         this.search()
        //   new Promise((resolve, reject) => {
        //     this.a1(val => {
        //       console.log(val);
        //       if(val == '111'){
        //
        //       }else if(val == '222'){
        //         resolve(2)
        //       }
        //     })
        //   }).then(result => {
        //     console.log(result);
        //   }).catch(reason => {
        //     console.log(reason);
        //   })
        }
    }
</script>

<style scoped>
  @media only screen and (min-width: 1920px){
    .table-advisory>>> .el-col-xl-10 {
      width: 86.666667% !important;
    }
  }

  @media only screen and (min-width: 1920px){
    .table-advisory>>> .el-col-xl-14 {
      width: 11.666667% !important;
    }
  }

  @media only screen and (min-width: 1200px){
    .table-advisory>>> .el-col-xl-10 {
      width: 86.666667% !important;
    }
  }

  @media only screen and (min-width: 1200px){
    .table-advisory>>> .el-col-xl-14 {
      width: 11.666667% !important;
    }
  }
  .mytables{
    display: none ;
    padding-top: 10px;

  }
  .mytable
  {

    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  .mytable td, table th
  {
    border: 1px solid rgba(59,65,81,.3);
    height: 40px;
  }
  .mytable .ttitle
  {
    background-color: #F5FAFA;
    width: 10%;
  }
  .mytable tr:nth-child(odd)
  {
    background: #fff;
  }
  .mytable .datalist{
    width: 30%;

  }
</style>
